<!--
 * @Author: 王灿
 * @Date: 2019-11-27 23:37:58
 * @LastEditTime : 2019-12-23 19:33:36
 * @Description: 课程管理
 * @FilePath: \scarlet-sparrow-admin\src\views\course\course-management\index.vue
 -->
<template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" @addTableRow="onTableRow" />
    <!-- 课程管理 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table">
        <!-- 课程主题 -->
        <el-table-column prop="theme" label="课程主题"></el-table-column>
        <!-- 课程说明 -->
        <el-table-column prop="courseExplain" label="课程说明"></el-table-column>
        <!-- 主持人 -->
        <el-table-column prop="host" label="主持人"></el-table-column>
        <!-- 主持人介绍 -->
        <el-table-column label="主持人介绍">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.hostIntroduce" />
          </template>
        </el-table-column>
        <!-- 开课人数 -->
        <el-table-column prop="classNum" label="开课人数" />
        <!-- 销售数量 -->
        <el-table-column prop="cumulativeSales" label="销售数量" />
        <!-- 开始时间 -->
        <el-table-column label="开始时间">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.startTime" />
          </template>
        </el-table-column>
        <!-- 结束时间 -->
        <el-table-column label="结束时间">
          <template slot-scope="scope">
            <jq-tooltip :content="scope.row.endTime" />
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" align="center" width="260" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 0" @click="onEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button v-if="scope.row.status !== 1" @click="onDelete(scope.row.id)" type="text" size="small" class="active">删除</el-button>
            <el-button v-else type="text" size="small">----</el-button>
            <el-button v-if="scope.row.status === 0" @click="onUpdateStatus(scope.row)" type="text" size="small">开始课程</el-button>
            <el-button v-if="scope.row.status === 1" @click="onUpdateStatus(scope.row)" type="text" size="small">结束课程</el-button>
            <el-button v-if="scope.row.status === 2" @click="onHighlights(scope.row.id, scope.row.highlights)" type="text" size="small">精彩剪辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />

    <!-- 编辑 -->
    <el-dialog
    class="course-dialog"
      :title="tabTitle"
      :visible.sync="isShow"
      :close-on-click-modal="false"
      width="600px"
    >
      <course-release @onCancelBtn="onCancelBtn" :row="tabRow" />
    </el-dialog>

    <!-- 精彩剪辑 -->
    <el-dialog
      title="精彩剪辑"
      :visible.sync="isHighlights"
      :close-on-click-modal="false"
      width="600px"
    >
      <course-operate @onCancelBtn="onCancelBtn" :id="id" :highlights="highlights" />
    </el-dialog>
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import CourseRelease from './../course-release/index.vue'
import CourseOperate from './course-operate/index.vue'
import { getCourseList, getCourseDelete, getCourseUpdateStatus } from '@/api/course.js'
export default {
  name: 'Course',
  components: {
    JqTitle,
    JqTooltip,
    JqPage,
    CourseRelease,
    CourseOperate
  },
  data() {
    return {
      title: { label: '课程管理', flag: false, searchFlag: false },
      pageSize: 10,
      pageNum: 1,
      tableData: [],
      // 分页总数
      total: 0,
      // 刷新页面开关
      isRefresh: false,
      // 新增-编辑
      isShow: false,
      tabTitle: '',
      tabRow: {},
      id: 0,
      isHighlights: false,
      highlights: ''
    }
  },
  created() {
    this.onGetCourseList()
  },
  watch: {
    // 刷新标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetCourseList()
      }
    },
    // 关闭弹窗  清空数据
    isShow() {
      if (!this.isShow) {
        this.tabRow = {}
        this.tabTitle = ''
      }
    }
  },
  methods: {
    // 课程列表
    onGetCourseList() {
      getCourseList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 父子组件通讯 -- 新增
    onTableRow(data) {
      this.isShow = data.isShow
      this.tabTitle = '新增'
      this.isRefresh = false
    },
    // 编辑
    onEdit(row) {
      this.tabRow = row
      this.isShow = true
      this.isRefresh = false
      this.tabTitle = '编辑'
    },
    // 页码变化
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
      this.isRefresh = true
    },
    // 刷新传值
    onCancelBtn(data) {
      this.isShow = data.isShow
      this.isHighlights = false
      this.isRefresh = data.isRefresh
    },
    // 删除
    onDelete(id) {
      this.$confirm('此操作将删除该课程，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
           let form = new FormData()
          form.append('courseId', id) 
          getCourseDelete(form).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetCourseList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 开始/结束课程
    onUpdateStatus(row) {
      let title = row.status === 0 ? "开始" : '结束'
      this.$confirm('此操作将'+ title +'该课程，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          getCourseUpdateStatus({
            id: row.id,
            status: row.status === 0 ? 1 : 2
          }).then(res => {
            this.$message({
              type: 'success',
              message: res.msg
            })
            this.onGetCourseList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 精彩剪辑
    onHighlights(id, highlights) {
      this.id = id
      this.highlights = highlights
      this.isHighlights = true
      this.isRefresh = false
    }
  }
}
</script>

<style lang="scss">
.course-dialog {
  .el-dialog { 
      overflow: hidden;
      height: 500px!important;
      .el-dialog__body {
        height: calc(500px - 34px);
      }
    }
}
</style>
